<script setup lang="ts">
  import { computed } from 'vue';
  import type { PopoverPlacement } from 'naive-ui';
  import { NTooltip } from 'naive-ui';
  import Button from './Button.vue';

  interface Props {
    tooltip?: string;
    placement?: PopoverPlacement;
  }

  interface Emit {
    (e: 'click'): void;
  }

  const props = withDefaults(defineProps<Props>(), {
    tooltip: '',
    placement: 'bottom',
  });

  const emit = defineEmits<Emit>();

  const showTooltip = computed(() => Boolean(props.tooltip));

  function handleClick() {
    emit('click');
  }
</script>

<template>
  <div v-if="showTooltip">
    <NTooltip :placement="placement" trigger="hover">
      <template #trigger>
        <Button @click="handleClick">
          <slot></slot>
        </Button>
      </template>
      {{ tooltip }}
    </NTooltip>
  </div>
  <div v-else>
    <Button @click="handleClick">
      <slot></slot>
    </Button>
  </div>
</template>
